<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'

import type { TableColumnCtx } from 'element-plus'
//table-list
const tableHeight = ref(0)
// 定义表格数据的类型
interface TableRow {
    id: number;
    time: string;
    name: string;
    name1: string;
}
//const listTableData = ref<any>([])
const listTableData = ref<any>([]);
//table 合并

interface SpanMethodProps {
    row: any
    column: any
    rowIndex: number
    columnIndex: number
}


// 新增data
const addDialogVisible = ref(false)
const addForm = ref({
    furnaceDicCode:'',
    furnaceName: '',
    furnaceCode: '',
})

// 修改data
const editDialogVisible = ref(false)
const editForm = ref({
    furnaceDicCode: '',
    furnaceName: '',
    furnaceCode: '',
})

import { FurnaceMsgList, addFurnaceMsg, editFurnaceMsg, delFurnaceMsg, FurnaceMsgInfo, DictDataType } from "@/api";

const dataType = ref<any>([])
const getDictDataType = (name:any) => {
    DictDataType(name).then(res=>{
        console.log('字典----',res.data)
        dataType.value = res.data
    })
}

// 搜索
const searchForm = ref({
    furnaceName: '',
    furnaceDicCode: '',

    // PageNum: 1, //当前页码
    // PageSize: 10 //PageSize
})
const totalPage = ref(0)

const searchFormRef = ref<FormInstance>()
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    // searchForm.value.PageNum = 1
    postFurnaceMsgList()
}
//list
const postFurnaceMsgList = () => {
    console.log('searchForm-------',searchForm.value)
    FurnaceMsgList(searchForm.value).then(res=>{
        console.log('list-------',res.data)
        listTableData.value = res.data
        totalPage.value =  res.data.totalNum
    })
}

//新增
const postAddFurnaceMsg = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            addFurnaceMsg(addForm.value).then(res=>{
                console.log('新增----',res)
                if(res.code === 200){
                    ElMessage({
                        type: 'success',
                        message: '添加成功',
                    })
                    addDialogVisible.value = false
                    addForm.value = {
                        furnaceDicCode:'',
                        furnaceName: '',
                        furnaceCode: '',
                    }
                    postFurnaceMsgList()
                }
                else{
                    ElMessage.error(res.msg)
                }
            })
        } else {
        console.log('error submit!', fields)
        }
    })
}

// 删除
const clickDelFurnaceMsg = (id:number) => {
    ElMessageBox.confirm(
        '是否确定删除，删除后不能恢复?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    )
    .then(() => {
        delFurnaceMsg(id).then(res=>{
            console.log('删除----',res)
            if(res.code === 200){
                ElMessage({
                    type: 'success',
                    message: '已成功删除',
                })
                postFurnaceMsgList()
            }
            else{
                ElMessage.error('删除失败，请重新删除')
            }
        })
    })
    .catch(() => {})
}

//修改
const postEditFurnaceMsg = () => {
    console.log('editForm----',editForm.value)
    editFurnaceMsg(editForm.value).then(res=>{
        console.log('修改----',res)
        if(res.code === 200){
            ElMessage({
                type: 'success',
                message: '修改成功',
            })
            editDialogVisible.value = false
            postFurnaceMsgList()
        }
        else{
            ElMessage.error(res.msg)
        }
    })
}

const editDialogShow = (data:any) => {
    console.log(data)
    editForm.value = data
    editDialogVisible.value = true
}

const ruleFormRef = ref<FormInstance>()
const rules = ref({
    furnaceDicCode: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    furnaceName: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    furnaceCode: [
        { required: true, message: '请输入', trigger: 'blur' },
    ]
})
const resetAddForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
// resetAddForm(ruleFormRef)

onMounted(() => {
    // 获取页面高度
    tableHeight.value = window.innerHeight - 310;
    getDictDataType('boiler_info')
    postFurnaceMsgList()
});


</script>
<template>
    <!-- 弹出框/新增 -->
    <el-dialog v-model="addDialogVisible" title="新增锅炉" width="900" :align-center="true">
        <div class="dialog_main">
            <el-form ref="ruleFormRef" :rules="rules" :inline="true" :model="addForm" class="mt15 form-inline-row-two" label-width="105">
                <el-form-item label="所属锅炉:" prop="furnaceDicCode">
                    <el-select v-model="addForm.furnaceDicCode" placeholder="请选择">
                        <el-option v-for="item in dataType" :label="item.dictLabel" :value="item.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item label="原煤仓名称:" prop="furnaceName">
                    <el-input v-model="addForm.furnaceName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="原煤仓编码:" prop="furnaceCode">
                    <el-input v-model="addForm.furnaceCode" placeholder="请输入" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="postAddFurnaceMsg(ruleFormRef)">
                    添加
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 弹出框/修改 -->
    <el-dialog v-model="editDialogVisible" title="修改锅炉" width="900" :align-center="true">
        <div class="dialog_main">
            <el-form :inline="true" :model="editForm" class="mt15 form-inline-row-two" label-width="105">
                <el-form-item label="所属锅炉:">
                    <el-select v-model="editForm.furnaceDicCode" placeholder="请选择">
                        <el-option v-for="item in dataType" :label="item.dictLabel" :value="item.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item label="锅炉名称:">
                    <el-input v-model="editForm.furnaceName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="锅炉编码:">
                    <el-input v-model="editForm.furnaceCode" placeholder="请输入" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer-center">
                <el-button type="primary" color="#2565C8" style="width: 130px;" @click="postEditFurnaceMsg">
                    修改
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 搜索 -->
    <div class="search_bor_bg">
        <el-form ref="searchFormRef" :inline="true" :model="searchForm" class="from_search_inline" label-width="90">
            <el-form-item label="所属锅炉:" prop="furnaceDicCode">
                <el-select v-model="searchForm.furnaceDicCode" placeholder="请选择">
                    <el-option v-for="item in dataType" :label="item.dictLabel" :value="item.dictValue" />
                </el-select>
            </el-form-item>
            <el-form-item label="原煤仓名称:" prop="furnaceName">
                <el-input v-model="searchForm.furnaceName" placeholder="请输入" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" color="#2565C8" @click="postFurnaceMsgList">搜索</el-button>
                <el-button style="padding:0 8px;" @click="resetForm(searchFormRef)">
                    <el-icon size="20">
                        <Refresh />
                    </el-icon>
                </el-button>
            </el-form-item>
        </el-form>
    </div>

    <div class="box_bg mt15">
        <div class="record_set">
            <el-button type="primary" color="#2565C8" @click="addDialogVisible = true,resetAddForm(ruleFormRef)">新增机组</el-button>
        </div>
        <div class="table_list mt15">
            <div class="">
                <table class="rowcol_table" style="width: 100%;">
                    <colgroup>
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                    </colgroup>
                    <tr>
                        <th>锅炉编码</th>
                        <th>锅炉名称</th>
                        <th>原煤仓编码</th>
                        <th>原煤仓名称</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="item in listTableData">
                        <td>{{ item.index }}</td>
                        <td>{{ item.groupName }}</td>
                        <td colspan="5">
                            <table style="width: 100%;">
                                <colgroup>
                                    <col width="33.33%">
                                    <col width="33.33%">
                                    <col width="33.33%">
                                </colgroup>
                                <tr v-for="(itema,index) in item.items" :class="index== 0?'':'bor_up'" >
                                    <td>{{ itema.furnaceCode }}</td>
                                    <td class="bor_left">{{ itema.furnaceName }}</td>
                                    <td class="bor_left">
                                        <div class="table_btn">
                                            <a href="javascript:;" @click="clickDelFurnaceMsg(itema.id)">删除</a>|
                                            <a href="javascript:;" @click="editDialogShow(itema)">修改</a>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>

            <!-- <el-table 
                :data="listTableData" 
                size="large" 
                :border="true" 
                :stripe="false" 
                :highlight-current-row="false"
                :height="tableHeight" 
                style="width: 100%;" 
                header-cell-class-name="table_th"
                ref="multipleTableRef">
                <el-table-column label="锅炉编码" prop="furnaceDicCode" align="center" />
                <el-table-column label="锅炉名称" prop="" align="center" />
                <el-table-column label="原煤仓编码" prop="furnaceCode" align="center" />
                <el-table-column label="原煤仓名称" prop="furnaceName" align="center" />
                <el-table-column label="操作" min-width="80" align="center">
                    <template #default="scope">
                        <div class="table_btn">
                            <a href="javascript:;" @click="clickDelFurnaceMsg(scope.row.id)">删除</a>|
                            <a href="javascript:;" @click="editDialogShow(scope.row)">修改</a>
                        </div>
                    </template>
                </el-table-column>
            </el-table> -->


        </div>
        <!-- <div class="pagination">
            <el-pagination v-model:current-page="searchForm.PageNum" v-model:page-size="searchForm.PageSize" @current-change="postFurnaceMsgList" :total="totalPage"  background layout="prev, pager, next" />
        </div> -->

    </div>
</template>
<style scoped lang="scss"></style>
